<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 基础题库 -->
        <!-- 头部 -->
        <div class="card-top">
          <span class="card-top1">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="mini" @click="$router.push('/questions/new')">
            <i class="el-icon-edit"></i>
            新增试题</el-button
          >
        </div>
        <!-- 表单区域 -->
        <div class="hcephalosome">
          <el-form label-width="80px" ref="formRef">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select v-model="items.subjeceID" style="width:100%" size="small">
                    <!-- 循环生成可选项 -->
                    <el-option
                      v-for="item in sbjList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select value="" style="width:100%" size="small">
                    <el-option></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select value="" style="width:100%" size="small">
                    <el-option></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input size="small" placeholder="根据题干搜索"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="items.questionType" style="width:100%" size="small">
                    <el-option
                      v-for="item in questionTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="items.difficulty" style="width:100%" size="small">
                    <el-option v-for="item in difficultyOption" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="items.direction" style="width:100%" size="small">
                    <el-option v-for="item in directionOpitom" :value="item" :label="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="items.creatorID" style="width:100%" size="small">
                    <el-option v-for="item in items" :label="item.creator" :value="item.creatorID"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="items.remarks" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                   <el-input v-model="items.shortName" placeholder="请输入内容"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- 城市 -->
                <el-form-item label="城市">
                  <el-select v-model="items.province" style="width:50%" size="mini" @change="handleCity">
                    <el-option v-for="item in provincesOpitom" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  <!-- 地区 -->
                  <el-select v-model="items.city"  style="width:50%" size="mini">
                    <el-option v-for="item in citysOpitom" :key="item"  :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
                 <el-col :span="6">
              <el-form-item style="text-align:right;">
                <el-button size="mini" @click="remove">清除</el-button>
                <el-button size="mini" @click="search" type="primary">搜索</el-button>
              </el-form-item> </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 文本 -->
        <el-tag class="el-tag" size="info" style="width:100%">
          <i class="el-icon-info"></i><span> 数据一共 {{ counts }} 条</span>
        </el-tag>
        <!--表格列表区域 -->
        <el-table :data="items" stript>
          <el-table-column width="80px" label="试题编号" prop="number"></el-table-column>
          <el-table-column width="80px" label="学科" prop="subject"></el-table-column>
          <el-table-column width="80px" label="目录" prop="catalog"></el-table-column>
          <el-table-column width="80px" label="题型" prop="questionType">
            <template v-slot="{ row }">{{ row.questionType | qstType() }}</template>
          </el-table-column>
          <el-table-column width="260px" label="题干" prop="question"></el-table-column>
          <el-table-column width="180px" label="录入时间" prop="addDate">
            <template v-slot="{ row }">{{ row.addDate | parseTimeByString }}</template>
          </el-table-column>
          <el-table-column width="80px" label="难度" prop="difficulty">
            <template v-slot="{ row }">{{ row.difficulty | aaa() }}</template>
          </el-table-column>
          <el-table-column width="80px" label="录入人" prop="creatorID"></el-table-column>
          <el-table-column width="180px" label="操作" prop="question">
            <template v-slot="{ row }">
              <el-button @click="showPer(row)" size="mini" type="primary" icon="el-icon-view" circle></el-button>
              <el-button @click="$router.push('/questions/new')"  size="mini" type="success" icon="el-icon-edit" circle></el-button>
              <el-button @click="romoveQuest(row.id)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
              <el-button @click="onselection(row)" size="mini" type="warning" icon="el-icon-check" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="q.page"
     :page-sizes="[5, 10, 20, 50]"
      :page-size="q.pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="counts"
      style="margin-left:400px">
    </el-pagination>
      </el-card>
    </div>
    <!-- 子组件 -->
    <che-ck :showDialog.sync="isShowAdd" :row.sync="row" :btnData.sync="btnData"/>
  </div>
</template>

<script>
// 按需导入接口
import { list ,remove,detail,choiceAdd} from '@/api/hmmm/questions.js'
// 学科简单列表
import { simple as getSbjListAPI } from '@/api/hmmm/subjects.js'
// 常量
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 所有城市
import { provinces,citys } from '@/api/hmmm/citys.js'
// 导入子组件
import CheCk from './companys/questions-check.vue';

export default {
  name: 'questions',
  // 注册子组件
  components:{
     CheCk
  },
  data() {
    return {
      // 查询参数对象
      q: {
        // 当前第几页
        page: 1,
        // 每页显示个数
        pagesize: 5
      },
      // 总数据条数
      counts: 0,
      // 用户的列表数据
      items: {
      subjectID: null,
      difficulty: null,
      questionType: null,
      tags: null,
      province: null,
      city: null,
      keyword: null,
      remarks: null,
      shortName: null,
      direction: null,
      creatorID: null,
      catalogID: null,
      page: 1,
      pagesize: 5     
},
      // 学科简单列表
      sbjList: [],
      // 难度
      difficultyOption: difficulty,
      // 题型
      questionTypeOption: questionType,
      // 方向
      directionOpitom: direction,
      // 所有省份
      provincesOpitom:[],
      // 所有地区
      citysOpitom:[],
      // row要传给子组件
      row:{},
      // 控制是否展示添加的对话框
      isShowAdd:false,
      // 详情的id
      id:0,
      // 详情
      btnData:{}
    }
  },
  created() {
    this.initQuestions()
    this.initSbjList()
    this.handleCity()
  },
  methods: {
    // 初始化数据
    async initQuestions() {
      const result = await list({ ...this.q })
      console.log(result)
      this.counts = result.data.counts
      this.items = result.data.items
      this.provincesOpitom = provinces()
      this.citysOpitom=citys()
    },
    // 初始化学科
    async initSbjList() {
      const result = await getSbjListAPI()
      // console.log(result)
      this.sbjList = result.data
    },
    handleCity(city){
      // 获取城市下的地区赋值给citysOpitom
      this.citysOpitom=citys(city)
    },
    // 监听页码值变化
    handleCurrentChange(newPage){
      this.q.page = newPage
      this.initQuestions()
    },
    // 监听页码值变化的下拉框
    handleSizeChange(newPage){
    this.q.pagesize = newPage
    this.initQuestions()
    },
    // 清除form表单
    remove(){
    this.$refs.formRef.resetFields()
    this.initQuestions()
    },
    // 删除题干
   async romoveQuest(id){
      // 询问
      // 掉接口
      // 提示消息
      // 刷新页面
    const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(result == 'cancel')  return
      await remove({id:id})
      this.$message.success('删除成功')
      if(this.q.page.length===1&&this.q.page>1){
        this.q.page--
      }
      this.initQuestions()
    },
    // row
    async showPer(row){
      console.log('这是row',row);
      // 给row里面的题型赋值
      this.row=row
      this.isShowAdd = true
      this.id = row.id
      //  点击的时候获取详情
    const result = await  detail({id:row.id})
    console.log('这是详情',result);
    this.btnData=result
    },
    // 加入精选
   async onselection(row){
     const result = await  this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(result !== 'confirm') return
        await choiceAdd({...row,id:row.id,choiceState:1})
        this.$message.success('加入精选成功')
        this.initQuestions()
    },
    // 搜索
  async  search(){
    const res = await list({items:this.items})
    console.log('这是res',res);
    }
  }
}
</script>

<style scoped>
.card-top {
  display: flex;
  justify-content: space-between;
}
.card-top1 {
  color: pink;
  font-size: 12px;
}
.hcephalosome {
  margin-top: 30px;
}
.a {
  display: flex;
  justify-content: space-evenly;
}
</style>
